<template>
  <div class="bd">
    <div class="card">
    <div class="right-side">
      <form class="loginForm">

        <h1 class="login-welcome-text" style="margin-bottom: 50px;">欢迎登录</h1>

<!--编辑部分-->
<!--        <i class="el-icon-user-solid" style="color: black"></i>-->
        <label class="loginLabel">用户名</label><br><br>
        <el-input v-model="username" placeholder="请输入用户名"></el-input>
        <br><br>

<!--        <i class="el-icon-s-goods" style="color: black"></i>-->
        <label class="loginLabel">密码</label><br><br>
        <el-input v-model="password" placeholder="请输入密码" show-password></el-input>
        <br><br>

<!--&lt;!&ndash;        <i class="el-icon-s-custom" style="color: black"></i>&ndash;&gt;-->
<!--        <label class="loginLabel">用户类型</label><br><br>-->
<!--        <el-select v-model="type" placeholder="请选择" style="width: 100%">-->
<!--          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
<!--        </el-select>-->
<!--        <br><br>-->



<!--按钮链接部分-->
        <div>
          <el-checkbox v-model="autologin" style="float: left;margin-left: 5px; color:#905a3a">下次自动登录</el-checkbox>
<!--          <router-link class="link" style="float: right" to="/forgetpassword">忘记密码</router-link>-->
        </div>
        <br>

<!--提交按钮部分-->
        <p style="text-align:center">
          <el-button type="primary" @click="submit()" style="width: 400px;height: 50px;font-size: 20px;background-color:#5c4743;border: none">登录</el-button>
        </p>

<!--注册按钮部分-->
        <p style="text-align:center;font-size: 14px">
          没有账号？<router-link class="link" to="/register" style="color:#905a3a">点击注册</router-link>
        </p>


<!--验证条部分-->
        <Vcode :show="isShow" @success="success" @close="close"/>

      </form>
      <br>
    </div>
    </div>

  </div>
</template>

<script>
import '../../css/login.css';
import Vcode from "vue-puzzle-vcode";
import store from "@/store";


export default {
  name: "login",
  data() {
    return {
      //用户登录输入的学号和密码
      username: '',
      password: '',
      autologin:true,

      //提示框显示标志变量
      isShow: false, // 验证码模态框是否出现


    };
  },
  components: {
    Vcode
  },
  created() {
    if (this.$store.state.IS_LOGIN !== '-1') {
      // 检查当前路径是否已经是目标路径
      if (this.$router.currentRoute.path !== '/index') {
        this.$router.push('/index');
      }
    }
  },
  methods: {


    //验证出现的函数
    submit() {
      if (this.username === '') {
        this.$store.state.GLOBAL_COMMON_MESSAGE = '请输入用户名';
        this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
        return;
      }
      if (this.password === '') {
        this.$store.state.GLOBAL_COMMON_MESSAGE = '请输入密码';
        this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
        return;
      }
      //显示表单
      this.isShow = true;
    },
    // 用户通过了验证
    success() {
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
      this.getOneUser();
    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
      this.isShow = false;
    },


    //根据账号密码从服务端获取一个用户数据
    getOneUser() {

      //保存用户输入的信息（自动登陆是App.vue的钩子函数实现的）
      localStorage.setItem('username',this.username)
      localStorage.setItem('password',this.password)

      let request={
        username:this.username,
        password:this.password
      }

      //发送登录请求
      console.log('登陆请求数据：')
      console.log(request)

      //括号内填发送的路径，其它参数固定
      fetch(this.$serviceIP+'/LoginRegister/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        },
        //这边放你要发送的数据体
        body: JSON.stringify(request)
      })
          //这部分是接收服务端信息的操作，then这两行是固定的代码
          .then(response => response.json())
          .then(data => {

            //默认返回码0成功，其他的码都是错误码
            if (data.code === "0") {
              console.log('登陆返回数据');
              console.log(data);//输出所有的服务端返回的data数据信息

              if(data.data.type===0)//超级管理员
              {
                //全局变量设置
                this.$store.state.IS_LOGIN = '0';
                this.$store.state.loginUser = data.data;
              }
              else if(data.data.type===1)//管理员
              {
                //全局变量设置
                this.$store.state.IS_LOGIN = '1';
                this.$store.state.loginUser = data.data;
              }
              else if(data.data.type===2)//用户
              {
                //全局变量设置
                this.$store.state.IS_LOGIN = '2';
                this.$store.state.loginUser = data.data;
              }
              else
              {
                this.$store.state.GLOBAL_COMMON_MESSAGE = '非法用户';
                this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
                return
              }
              store.state.GLOBAL_MESSAGE = "登陆成功！"
              store.state.YES="确定"
              store.state.GLOBAL_MESSAGE_LINK = "/index"
              store.state.IS_SHOW_MESSAGE = true;


            } else {
              console.log(data);//输出所有的服务端返回的data数据信息
              this.$store.state.GLOBAL_COMMON_MESSAGE = '登陆失败';
              this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
            }

          })
          //catch部分固定写法，可以不动它（但凡程序跑到这了就说明你代码有问题）
          .catch(error => {
            console.error('Error:', error);
            this.$store.state.GLOBAL_COMMON_MESSAGE = '无法连接服务器';
            this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
          });


      //要不要自动登录
      if(this.autologin===true)
      {
        localStorage.setItem('autologin','true')//设置自动登陆
      }
      else
      {
        localStorage.removeItem('autologin')//取消自动登陆
      }

      //重置参数为默认
      this.username = '';
      this.password = '';


    },
  },
  mounted() {
    //该部分加载完成后的自动进行的操作（对于一些数据初始化需要从服务端获取时，这个部分才用得上）
    //记住账号密码部分的加载操作
    this.username = localStorage.getItem('username') || '';
    this.password = localStorage.getItem('password') || '';
    console.log(this.username+" "+this.password)
  }


};
</script>
